<template>
  <div class="box">
    <!-- 点检项 -->
    <div class="titleNodeBox">
      <div>
        <div v-for="(itx,idx) in itemList" :key="idx" class="checkDetailsBox">
          <ul>
            <li>
              <span>点检项</span>
              <b>{{ itx.itemName }}( {{ itx.itemCode }})</b>
            </li>
            <li>
              <span>点检项描述</span>
              <b>
                <van-cell-group v-if="itx.itemRemark">
                  <van-field v-model="itx.itemRemark" rows="3" disabled autosize type="textarea" />
                </van-cell-group>
                <span v-else>--</span>
              </b>
            </li>
            <li>
              <span>点检结果</span>
              <b style="height: 100%;">
                <van-radio-group v-model="itx.itemResult" style="margin-top:5px;height: 100%;" class="radioStyle" direction="horizontal">
                  <van-radio :name="1" shape="square">通过</van-radio>
                  <van-radio :name="0" shape="square">不通过</van-radio>
                </van-radio-group>
              </b>
            </li>
            <li>
              <span>备注</span>
              <b>
                <van-cell-group>
                  <van-field v-model="itx.remark" rows="3" size="mini" autosize type="textarea" maxlength="200" show-word-limit />
                </van-cell-group>
              </b>
            </li>
            <li>
              <div class="tips">附件上传(支持PNG或者JPG格式,最多5张,单张不得大于5M)</div>
            </li>
            <li>
              <div class="liDiv">
                <van-uploader v-model="itx.fileList" multiple :max-count="5" :after-read="afterRead(itx)" :max-size="5242880" accept="image/jpeg, image/png" @oversize="onOversize">
                  <van-button round type="info">上传图片</van-button>
                </van-uploader>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InspectionItems',
  props: {
    itemList: {
      type: Array,
      default: function () { }
    }
  },
  data () {
    return {
      disableds: false
    }
  },
  computed: {},

  watch: {
    itemList: {
      handler (news) {
        setTimeout(() => {
          let flag = news.every((item) => item.itemResult === 1)
          this.$emit('resultChange', flag)
        }, 500)
      },
      deep: true
    }
  },
  async mounted () { },
  methods: {
    /** 验证数量只可输入大于0 的整数 */
    formatter (value) {
      return value.replace(/^|[^0-9]/g, '')
    },
    onOversize (file) {
      this.$toast.fail('文件大小不能超过 5M')
    },
    // 上传图片
    afterRead (fileList) {
      return (file) => {
        if (file) {
          if (file.constructor === Object) file = [file]
          const toast = this.$toast.loading({
            duration: 0, // 持续展示 toast
            message: '图片上传中...',
            forbidClick: true,
            loadingType: 'spinner'
          })
          file.filter((item, index) => {
            const form = new FormData()
            form.append('file', item.file)
            this.$axios.post('/dobo-file/files-anon', form).then((res) => {
              if (res.data.code === 200) {
                item.fileId = res.data.data.id
                item.fileUrl = res.data.data.url
                item.fileName = res.data.data.name
                if (++index === file.length) {
                  toast.clear()
                }
              } else {
                this.$toast.fail(res.data.msg)
                toast.clear()
              }
            })
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.checkDetailsBox {
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
  ul {
    li {
      overflow: hidden;
      height: auto;
      padding: 10px 0;
      font-size: 22px;
      background: #f5f5f5;
      .liDiv {
        padding: 0 10px;
        .van-button {
          height: 45px;
          font-size: 20px !important;
        }
      }
      span {
        display: block;
        width: 130px;
        float: left;
        text-align: center;
        margin-right: 10px;
        // border-right:1px solid #ccc ;
      }
      b {
        width: calc(100% - 150px);
        margin-right: 10px;
        display: block;
        float: left;
        font-weight: normal;
        .van-cell {
          font-size: 20px !important;
        }
      }
      .tips {
        color: red;
        font-size: 18px;
        padding: 0 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.checkDetailsBox {
  ul {
    li {
      b {
        .van-field__control {
          font-size: 18px !important;
        }
        .van-radio__icon {
          .van-icon {
            width: 20px;
            height: 20px;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>
